<template>
	<view>
		<view class="topbox clear">
			<view class="top">
				<view class="indexPage" :style="{ paddingTop: titleTop + 'px' }">
					<view class="main-title" :style="{ height: statusBarHeight + 'px' }">
						<image @click="toBack" src="https://daiyue.gzzhenyi.net/static/products/back.png"
							mode="widthFix">
						</image>
						<image class="search" @click="navTo(`/long/search/search`)"
							src="https://daiyue.gzzhenyi.net/static/products/search.png" mode="widthFix">
						</image>
					</view>
				</view>
			</view>
			<image class="topbgimg" :src="baseUrl + item.images" mode="widthFix"></image>

		</view>

		<view class="content-box">
			<view class="content-title-box" v-if="lowest_price">
				<view class="pa-product">底价:</view>
				<view class="pa-pay">¥{{ lowest_price }}</view>
				<!-- <view class="pa-product">会员价:</view>
                <view class="pa-pay">¥{{ item.vip_price }}</view>
                <view class="pa-payer">¥{{ item.market_price }}</view> -->
			</view>
			<!-- <view class="content-title-box" v-if="item.vip_price == 0 && item.market_price > 0">
                <view class="pa-pay">¥{{ item.market_price }}</view>
            </view> -->
			<view class="pe-titles" v-else @click="showModal(item.id)">验证后查询底价</view>
			<view class="ps-title">{{ item.title }}</view>
			<view class="pc-title">{{ item.description }}</view>
		</view>

		<view class="content-box-function">
			<view class="content-box-function-fext">
				<view class="content-box-function-fext-title">型号</view>
				<view class="content-box-function-fext-name">{{ item.model_no }} </view>
			</view>
			<view class="content-box-function-fext">
				<view class="content-box-function-fext-title">功能</view>
				<view class="content-box-function-fext-list">
					<view class="content-box-function-fext-item" v-for="item in item.functional " :key="item">{{ item }}
					</view>
				</view>
			</view>
			<view class="content-box-function-fext">
				<view class="content-box-function-fext-title">设备信息</view>
				<view class="content-box-function-fext-collapse" v-if="!collapse" @tap="collapse = true">
					<view class="content-box-function-fext-collapse-title">{{ item.device_info }}
					</view>
					<van-icon name="arrow-down" color="#999999" />
				</view>
				<view class="content-box-function-fext-collapse" v-else @tap="collapse = false">
					<view class="content-box-function-fext-collapse-title-fales">
						{{ item.device_info }}
					</view>
					<van-icon name="arrow-up" color="#999999" />
				</view>
			</view>
		</view>

		<view class="content-box-detail" style="margin-bottom: 200rpx;">
			<view class="content-box-detail-title">详情</view>
			<view class="content-box-detail-content" style="padding: 0 0 0 32rpx;" v-html="replaceWhite(item.content)">
			</view>

			<view class="content-box-detail-title">附件下载</view>
			<view style="padding: 0 0 0 32rpx;">
				<van-button plain type="info" size="small" @click="downloadAttachment(item.attachment_url)">点击下载附件</van-button>
			</view>
		</view>
		<view class="content-box-detail-bottom">
			<view class="content-box-detail-bottom-content">
				<view class="content-box-detail-bottom-content-left" @click="clickShare()">
					<image src="https://daiyue.gzzhenyi.net/static/image/user/wx.png" mode="widthFix" />
					<span>添加微信</span>
				</view>
				<view class="content-box-detail-bottom-content-right" @click="clickPhone()">
					<image src="https://daiyue.gzzhenyi.net/static/image/user/phone.png" mode="widthFix" />
					<span>联系方式</span>
				</view>
			</view>
		</view>
		<van-popup round :show="isModalVisible" @close="onClose">
			<view class="code_center">
				<view class="box">
					<view class="title">验证手机号</view>
					<view class="mobile">{{ hiddenmobile }}</view>
					<view class="code">
						<input class="input-code" v-model="verificationCode" placeholder="请输入验证码" />
						<van-button plain hairline size="small" type="info" @click="send">发送</van-button>
					</view>
					<!-- <van-cell-group>
						<van-field :value="verificationCode" center clearable placeholder="请输入验证码" :border="false"
							use-button-slot>
							<van-button slot="button" size="small" type="primary">
								发送验证码
							</van-button>
						</van-field>
					</van-cell-group> -->
				</view>
				<view class="btn" @click="verification">
					立即验证
				</view>
				<view v-if="errorMessage" class="error">{{ errorMessage }}</view>
			</view>
		</van-popup>
		<van-popup :show="showPopup" custom-style="background: transparent;">
			<shareSheet v-if="ismsg" :shopList="msgShop" @toBack="showPopup = false" />
		</van-popup>
	</view>
</template>

<script>
import shareSheet from './shareSheet.vue';
import { getGoodsDetail, getStoreList, getFloorPrice,getShopInfo} from "@/api/api.js"
import baseUrl from '@/api/baseUrl';
import { replaceWhite } from "@/util/util.js"
import { mapState, mapMutations } from "vuex";

	export default {
		components: {
			shareSheet
		},
		data() {
			return {
				baseUrl,
				funList: ['治疗', '辅助治疗', '辅助治疗', '辅助治疗'],
				collapse: false,
				showPopup: false,
				pay: false,
				item: '',
				latitude: '',
				longitude: '',
				shopList: {},
				lowest: {},
				titleTop: 0,
				statusBarHeight: 0,
				phone: "",
				msgShop: {

				},
				ismsg: false,
				// 底价
				lowest_price: 0,
				
				goods_id : 0,
				isModalVisible: false,
				verificationCode: '',
				errorMessage: '',
				isCodeSent: false
			};
		},
		computed: {
			...mapState(["user"]),
			hiddenmobile() {
				return this.user.mobile.slice(0, 3) + '****' + this.user.mobile.slice(7);
			}
		},
		onReady() {
			let that = this;
			// 获取胶囊按钮位置信息
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const {
				top,
				height
			} = menuButtonInfo;
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

			// 计算标题需要偏移的位置
			const titleTop = top + (height - statusBarHeight) / 2;
			this.titleTop = titleTop; //设置标题顶部距离
			this.statusBarHeight = statusBarHeight; //设置状态栏高度
		},
		onLoad(e) {
			this.id = e.id
			this.shop_id = e.shop_id
			// this.lowest_price = e.lowest_price
			this.defaults(e.id)
			if (this.user.mobile) {
				this.onClickPay()
			}
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					this.longitude = res.longitude
					this.latitude = res.latitude
				},
				fail: function(err) {
					console.log(err)
				}
			});
		},
		methods: {
			replaceWhite,
			// 手机号验证框
			showModal(item) {
				this.goods_id = item.id
				this.isModalVisible = true;
			},
			// 关闭验证框
			onClose() {
				this.isModalVisible = false;
				this.verificationCode = ""
			},
			send() {
				sendCode({
					mobile: this.user.mobile,
					event: "verify"
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '发送成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 验证手机号
			verification() {
				getFloorPrice({
					mobile: this.user.mobile,
					captcha: this.verificationCode,
					goods_id: this.goods_id
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: "验证成功",
							icon: 'none'
						})
						console.log(res)
						this.onClose()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			onClickPay() {
				if (!this.user.mobile) {
					return this.navTo('/pages/login/register');
				}
				getFloorPrice({
					mobile: this.user.mobile,
					goods_id: this.id
				}).then(res => {
					if (res.code == 1) {
						if (res.data.functional) {
							res.data.functional = res.data.functional.split(',')
						} else {
							res.data.functiona = []
						}
						this.lowest = res.data
						this.pay = true
					}
				})
			},
			// 附件下载
			downloadAttachment(url) {
				const fileUrl = this.baseUrl + url; // 替换为你要下载的文件URL
				uni.downloadFile({
					url: fileUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							// 下载成功后，直接打开文件
							uni.openDocument({
								filePath: res.tempFilePath,
								fileType: 'pdf', // 根据文件类型设置，例如 'pdf', 'doc', 'xls' 等
								success: () => {
									console.log('文件打开成功');
								},
								fail: (err) => {
									console.error('文件打开失败：', err);
									uni.showToast({
										title: '文件打开失败',
										icon: 'none'
									});
								}
							});
						} else {
							console.error('下载失败：', res);
							uni.showToast({
								title: '下载失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('下载失败：', err);
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						});
					}
				});
			},
        
        // 链接跳转
        navTo(url) {
            uni.navigateTo({
                url
            })
        },
        toBack() {
            uni.navigateBack()
        },
        clickPhone() {
            if (this.phone) {
                uni.makePhoneCall({
                    phoneNumber: this.phone
                })
            } else {
                uni.showToast({
                    title: '暂无联系方式',
                    icon: 'none'
                })
            }

        },
        clickShare() {
            if (this.msgShop.state_text) {
                this.showPopup = true
            } else {
                uni.showToast({
                    title: '暂无信息',
                    icon: 'none'
                })
            }
        },
        defaults() {
            getGoodsDetail({ id: this.id }).then(res => {
                console.log(res)
                if (res.code == 1) {
                    this.item = res.data
					
                    this.store()
					
					getShopInfo({shop_id: res.data.shop_id}).then(res=>{
						console.log(res)
						if(res.code == 1){
							this.phone = res.data.phone
							this.msgShop = res.data
							this.ismsg = true
						}
					})
                }
            })
        },
        store() {
            let data = {
                shop_id: this.item.shop_id,
                longitude: this.longitude || '113.38',
                latitude: this.latitude || '22.94'
            }
            getStoreList(data).then(res => {
                if (res.code == 1) {
                    if (res.data.length > 0) {
						
                        this.shopList = res.data[0]
                    }
                }
            })
        },
    }
}
</script>

<style lang="scss">
	// page {
	//     background: #eeeeee;
	// }

	.clear:after {
		display: block;
		content: " ";
		clear: both;
		height: 0;
	}

	.top {
		position: fixed;
		top: 0;
		background-size: 100%;
		background-repeat: no-repeat;
		box-sizing: border-box;
		width: 100%;
		z-index: 99;
	}

	.main-title {
		/*必要 对齐胶囊按钮*/
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;

		image {
			width: 55rpx;
			height: 55rpx;
			// margin-top: 4.2%;
		}

		.search {
			position: absolute;
			right: 30%;
		}
	}

	.topbox {
		.topbgimg {
			width: 100%;
		}
	}

	.content-box {
		background-color: #ffffff;
		border-radius: 15upx;
		padding: 30upx;
		margin-top: -8upx;
		margin-bottom: 30upx;

		.content-title-box {
			display: flex;
			align-items: center;
			margin-bottom: 15upx;

			.pa-product {
				font-size: 22upx;
				color: #FF6200;
			}

			.pa-pay {
				font-size: 30upx;
				color: #FF6200;
				margin-right: 15upx;
			}

			.pa-payer {
				color: #A2A2A2;
				font-size: 24upx;
			}
		}

		.pe-titles {
			font-size: 30upx;
			color: #FF6200;
			margin-bottom: 15upx;
		}

		.ps-title {
			font-size: 30upx;
			color: #333333;
			margin-bottom: 15upx;
		}

		.pc-title {
			font-size: 25upx;
			color: #A2A2A2;
		}
	}

	.content-box-function {
		background-color: #ffffff;
		border-radius: 15upx;
		margin-bottom: 30upx;

		.content-box-function-fext {
			display: flex;
			// align-items: center;
			border-bottom: 1px solid #F0F0F0;
			padding: 30upx 0;

			.content-box-function-fext-title {
				font-size: 30upx;
				color: #5C5C5C;
				margin: 0 30upx;

			}

			.content-box-function-fext-name {
				font-size: 30upx;
				color: #333333;
				max-width: 540upx;
			}

			.content-box-function-fext-list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				max-width: 600upx;
			}

			.content-box-function-fext-item {
				font-size: 30upx;
				color: #333333;
				margin-right: 20upx;
				position: relative;

			}

			.content-box-function-fext-item::after {
				content: " ";
				position: absolute;
				border-right: 1px solid #D8D8D8;
				right: -10upx;
				top: 50%;
				transform: translateY(-50%);
				width: 1px;
				height: 14upx;
			}

			.content-box-function-fext-item:last-child::after {
				content: '';
				border: 0;
			}

			.content-box-function-fext-collapse {
				display: flex;
				// align-items: center;
				justify-content: space-between;
				color: #333333;
				font-size: 30upx;
				width: 530upx;
			}

			.content-box-function-fext-collapse-title {
				width: 400upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-break: break-all;
				font-size: 30upx;
				color: #333333;
				flex: 1;
			}

			.content-box-function-fext-collapse-title-fales {
				width: 400upx;

				font-size: 30upx;
				color: #333333;
				flex: 1;
			}

		}
	}

	.content-box-detail {
		background-color: #ffffff;
		border-radius: 15upx;
		margin-bottom: 30upx;
		padding: 30upx 0;
		margin-bottom: 150upx;
		padding-bottom: 150rpx;

		.content-box-detail-title {
			color: #333333;
			font-size: 30upx;
			padding: 0 30upx;
			margin: 30rpx 0;
		}

		.content-box-detail-content {
			image {
				width: 100%;
				height: auto;

			}
		}
	}

	.content-box-detail-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		padding: 15upx 30upx 70upx 30upx;

		.content-box-detail-bottom-content {
			display: flex;
			align-items: center;
			justify-content: center;

			.content-box-detail-bottom-content-left {
				display: flex;
				align-items: center;
				background-color: #28C445;
				border-radius: 50upx 0 0 50upx;
				padding: 15upx 90upx;

				image {
					width: 30upx;
					height: 30upx;
				}

				span {
					font-size: 26upx;
					color: #ffffff;
					margin-left: 15upx;
				}
			}

			.content-box-detail-bottom-content-right {
				display: flex;
				align-items: center;
				background-color: #359BEF;
				border-radius: 0 60upx 60upx 0;
				padding: 15upx 90upx;

				image {
					width: 30upx;
					height: 30upx;
				}

				span {
					font-size: 26upx;
					color: #ffffff;
					margin-left: 15upx;
				}
			}
		}
	}
	.code_center {
		padding: 36rpx 56rpx 36rpx 56rpx;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	
		.box {
			display: flex;
			flex-direction: column;
			row-gap: 20rpx;
			width: 360rpx;
	
			.title {
				text-align: center;
				font-size: 40rpx;
				color: #333333;
			}
	
			.mobile {
				text-align: center;
				font-size: 36rpx;
				font-weight: bold;
			}
	
			.code {
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.input-code {
					flex: 1;
					width: 100%;
					font-size: 36rpx;
				}
			}
		}
	
		.btn {
			width: 160rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: #fff;
			background-color: #FF6200;
			border: 1rpx solid #FF6200;
			border-radius: 12rpx;
			margin-top: 30rpx;
		}
	}
</style>